<template>
  <div class="el-dialog-div" ref="formBox">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" size="mini" @click="pasteTurnGoods">粘贴商品</el-button>
      </el-col>
    </el-row>
    <el-form ref="form" :model="form" label-width="130px" :rules="rules">
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="form.name" class="input-W" placeholder="商品名称" />
      </el-form-item>
      <el-form-item label="商品编号" prop="goodsNo">
        <el-input v-model="form.goodsNo" class="input-W" placeholder="商品编号" />
      </el-form-item>
      <el-form-item label="转场场馆名称" prop="turnVenues">
        <el-select v-model="form.turnVenues" placeholder="场馆选择" clearable class="input-W">
          <el-option v-for=" dict in this.venueList" :key="dict.id" :label="dict.name" :value="dict.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="商品价格区间" prop="cashPriceType">
        <el-select v-model="form.cashPriceType" placeholder="" clearable class="input-W">
          <el-option v-for="dict in this.cashPriceList" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="再次转场次数" prop="totalResellNum">
        <el-input v-model="form.totalResellNum" class="input-W" placeholder="请输入再次转场次数" />
      </el-form-item>

      <el-form-item label="成本价格(元)" prop="costPrice">
        <el-input v-model="form.costPrice" class="input-W" placeholder="请输入成本价格" />
      </el-form-item>
      <el-form-item label="是否上架" prop="isPutaway">
        <el-select v-model="form.isPutaway" placeholder="上架状态" clearable class="input-W" @change="$forceUpdate()">
          <el-option v-for="dict in this.dict.type.goods_putaway_status" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="排序" prop="orderNum">
        <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
      </el-form-item>
<!--      <el-form-item label="缩略图" prop="imgMin">-->
<!--        <image-upload :valueData="form.imgMin" params="imgMin" @uploaded="uploaded"></image-upload>-->
<!--      </el-form-item>-->
      <el-form-item label="大图" prop="minList">
        <image-upload :valueData="form.minList" params="minList" @uploaded="uploaded"></image-upload>
      </el-form-item>
      <el-form-item label="商品详情" prop="details">
        <editor :value="form.details" :height="400" ref="editor"></editor>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { pickGoodesEnum, goodsPayTypeEnum } from '@/common/enums'
import turnGoods from '@/store/modules/turngoods'

export default {
  name: 'formView',
  dicts: ['goods_putaway_status'],
  props: {
    formData: {
      type: Object,
    },
    cashPriceList: {
      type: Array,
    },
    venueList:{
      type: Array
    }

  },

  data() {

    const validtext = (rule, value, callback) => {
      let textValue = this.$refs.editor.currentValue;
      if (!textValue) {
        callback(new Error('请输入详情内容'))
      } else {
        callback()
      }
    };
    const imgValidtext = (rule, value, callback) => {
      let textValue = this.form.minList;
      if (textValue && textValue[1] != ']') {
        callback()
      } else {
        callback(new Error('请上传大图'))
      }
    }
    return {
      goodsPayTypeEnum,
      pickGoodesEnum,
      form: this.formData,
      rules: {
        name: [{ required: true, message: "商品名称必填", trigger: "blur" }], //商品名称
        totalResellNum: [{ required: true, message: "转场次数", trigger: "blur" }], //现金价格
        isPutaway: [{ required: true, message: "是否上架必选", trigger: "blur" }], //是否上架
        cashPriceType: [{ required: true, message: "价格区间必选", trigger: ["change","blur"] }], //是否上架
        turnVenues: [{ required: true, message: "转场场馆必选", trigger: "change" }], //是否上架
        minList: [{ required: true, message: "大图必填", trigger: ["blur", "change"], validator: imgValidtext }],  //大图
        goodsNo: [{ required: true, message: "商品编号必填", trigger: "blur" }], //商品编号
        costPrice: [{ required: true, message: "成本价格必填", trigger: "blur" }], //成本价格
        details: [{ required: true, trigger: ["blur", "change"], validator: validtext }],
      },
    }
  },
  watch: {
    formData: function (val) {
      this.form = val;
    }
  },
  mounted() {
  },
  updated() {
  },
  methods: {


    uploaded(params, dict) {
      this.form[params] = JSON.stringify(dict);
    },

    pasteTurnGoods(){
      let copyGoods = JSON.parse(JSON.stringify(this.$store.state.turnGoods.copyTurnGoodsDict));
      if (copyGoods) {
        this.form = copyGoods;
        this.form.isPutaway = '0';
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-dialog-div {
  height: 70vh;
  overflow: auto;
  padding-right: 30px;
}

.input-W {
  width: 100%;
}
</style>
